<template>
  <BaseDialog :loading="loading" destroy-on-close @confirm="save" @close="close" confirmText="保存" v-model="isShow"
              :title="title">
    <el-form
        ref="formRef"
        :model="state.dataForm"
        :rules="rules"
        label-width="80px"
        @submit="save"
    >
      <el-form-item label="设计名称" prop="designName">
        <el-input clearable placeholder="请输入设计名称" v-model="state.dataForm.designName"/>
      </el-form-item>
      <el-form-item label="流程分组" prop="groupCode">
        <BaseSelect :options="flowGroupOptions" :props="groupProps" clearable placeholder="请选择流程分组" v-model="state.dataForm.groupCode"/>
      </el-form-item>
      <el-form-item label="是否启用" prop="enabled">
        <el-switch :active-value="1" :inactive-value="2" v-model="state.dataForm.enabled"/>
      </el-form-item>
    </el-form>
  </BaseDialog>
</template>

<script setup lang="ts">

import {onMounted, reactive, ref} from "vue";
import {FlowDesignModel} from "/@/api/flow/model/FlowDesignModel";
import {insertFlowDesign, updateFlowDesign} from "/@/api/flow/FlowDesignApi";
import {listFlowGroupAll} from "/@/api/flow/FlowGroupApi";
import {FlowGroupModel} from "/@/api/flow/model/FlowGroupModel";

const emit = defineEmits(['load'])
const state = reactive({
  dataForm: {
    designName: '',
    orgId: '',
    groupCode: '',
    designContent: '',
    designVersion: '',
    enabled: 1,
  } as FlowDesignModel
})
const groupProps = {
  label: 'groupName',
  value: 'groupCode',
  disabled: (res)=>{
    return res.enabled == 2
  }
}
const flowGroupOptions = ref<FlowGroupModel[]>([])
const formRef = ref()
const loading = ref(false)
const isShow = ref(false)
const title = ref("")
const init = (titleValue: string, data: FlowDesignModel) => {
  if (data) {
    state.dataForm = {...state.dataForm,...data}
  }
  title.value = titleValue
  isShow.value = true
}
/**
 * 保存流程设计
 */
const save = async () => {
  await formRef.value.validate()
  loading.value = true
  if (state.dataForm.designId) {
    await updateFlowDesign(state.dataForm, () => {
      loading.value = false
    })
  } else {
    await insertFlowDesign(state.dataForm, () => [
      loading.value = false
    ])
  }
  emit('load')
  close()
}
/**
 * 关闭
 */
const close = () => {
  state.dataForm = {
    designName: '',
    orgId: '',
    groupCode: '',
    designContent: '',
    designVersion: '',
    enabled: 1,
  } as FlowDesignModel
  isShow.value = false;
}
/**
 * 查询所有流程分组
 */
const queryFlowGroup = async () => {
 let res = await listFlowGroupAll()
  flowGroupOptions.value = res
}

defineExpose({init})

const rules = {
  designName: [
    {required: true, message: '设计名称不能为空', trigger: 'blur'},
    {min: 1, max: 64, message: '设计名称长度为1到64个字符', trigger: 'blur'}
  ],
  orgId: [
    {required: true, message: '组织id不能为空', trigger: 'blur'},
  ],
  groupCode: [
    {required: true, message: '分组编号不能为空', trigger: 'blur'},
    {min: 1, max: 64, message: '分组编号长度为1到64个字符', trigger: 'blur'}
  ]
}
onMounted(()=>{
  queryFlowGroup()
})
</script>

<style scoped>

</style>